@extends('layouts.mobile_main')

@section('title', '写评价')

@section('resources')
    @parent
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
   <style>
   		.evaluate_outer{background: url({{env('IMAGE_DOMAIN')}}images/access_background.png) 0 0 no-repeat;background-size: 100%;}
   		textarea{
   			width: 8.2rem;
   			height: 5rem;
   			background:#fff;
   			margin: 0.2rem auto;
   			font-size: 0.42rem;
   			padding: 0.4rem 0rem;
   			border-top: 1px solid #d6d7dc;
   			border-bottom: 1px solid #d6d7dc;
   		}
   		section .num{
   			width: 2rem;
   			position: relative;
   			top: -1.1rem;
   			left: 7rem;
   		}
        #score{
            position: absolute;top: 4.3rem;left: 2.4rem;
            width: 6.2rem;
            height: 1rem;
            opacity: 0;
        }
        .evaluate_img p img{
            margin-left: 0.2rem;
        }
   	</style>
@endsection

@section('content')
	<div class="evaluate_outer">
    	<header class="pay_sure oh" style="border-bottom: none;">
    		<a class="fl" href="javascript:history.go(-1);">
    		    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_g.png?v={{env('IMAGE_VERSION')}}" alt="">
    		</a>
    		<p class="fl fz_48 tc" style="width: 7.9rem;">{{$shopname}}</p>
    		<input type="hidden" name="ordernumber" value="{{$ordernumber}}" />
    		<span class="fz_48 evaluate_keep fr" id="submit">提交</span>
    	</header>
    	<section class="evaluate_center tc">
    		<div class="evaluate_img tc">
                <p style="width: 6rem;margin: 0 auto;" class="oh">
                    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/access_empty.png" alt="">
                    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/access_empty.png" alt="">
                    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/access_empty.png" alt="">
                    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/access_empty.png" alt="">
                    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/access_empty.png" alt="">
                </p>
                <input type="range" name="" value="100" min="0" oninput="change()" max="100" step="10" id="score">
    			<p class="fz_40" id="scores">0分</p>
    		</div>
    		<textarea name="content" id="" placeholder="写下您的消费体验..." onkeyup="xian()"></textarea>
    		<p class="oh num">
    			<span class="fz_34 fl textnum co_gray">0</span>
    			<span class="fz_34 fl co_gray">/500字</span>
    		</p>
            <!-- <div class="up_picture">
                <p id="up_picture"></p>
                <input class="but_img" type="file" accept="image/*"  multiple="true">
                <img class="add_img" src="{{env('IMAGE_DOMAIN')}}images/access_addpicture.png" alt="">
            </div> -->
    	</section>
    </div>
@endsection

@section('scriptResources')
    @parent
    <script>
        window.onresize=function(){
        		pagesp();
        }
        /*var up_picture=document.getElementById('up_picture');
        $('.but_img').on('click', function(){
            up_picture.ondragover=function(ev){
                ev.preventDefault();
            };
            up_picture.ondrop=function(ev){
                ev.preventDefault();
                console.log(ev.dataTransfer.files);
                var f=ev.dataTransfer.files[0];//返回的类似json，调用里面的第一个东西
                var read=new FileReader();
                read.readAsDataURL(f);//转换不仅仅可以是图片，也能是文件。。。。把文件转换成地址
                read.onload=function(){
                    up_picture.innerHTML='<img src="'+this.result+'" alt="">';
                }
            };
        })
        // var options =
        // {
        //     thumbBox: '#up_picture',
        //     imgSrc: 'images/avatar.png'
        // }
        // $('.but_img').on('change', function(){
        //     var reader = new FileReader();
        //     reader.onload = function(e) {
        //         options.imgSrc = e.target.result;
        //         cropper = $('#up_picture').cropbox(options);
        //     }
        //     reader.readAsDataURL(this.files[0]);
        //     this.files = [];
        // })*/
        function xian(){
            var textnum=$("textarea").val().length;
            $(".textnum").html(textnum);
            if(textnum>500){
                textnum=500;
                $("textarea").val($("textarea").val().substring(0,500));
                $(".textnum").html(textnum);
            }
        }
        function change(){
            var score=$("#score").val()
            $("#scores").html(score/10+"分");
            var score_num=parseInt(score/10);
            // alert(1%2)
            if(score_num%2==0){
                $(".evaluate_img p img").attr("src","{{env('IMAGE_DOMAIN')}}images/access_empty.png");
                for (var i = 0; i < score_num/2; i++) {
                    $(".evaluate_img p img").eq(i).attr("src","{{env('IMAGE_DOMAIN')}}images/access_enter.png");
                };
            }else if(score_num==1){
                $(".evaluate_img p img").eq(0).attr("src","{{env('IMAGE_DOMAIN')}}images/access_half.png");
            }else if(score_num%2==1){
                $(".evaluate_img p img").attr("src","{{env('IMAGE_DOMAIN')}}images/access_empty.png");
                for (var i = 0; i < parseInt(score_num/2); i++) {
                    $(".evaluate_img p img").eq(i).attr("src","{{env('IMAGE_DOMAIN')}}images/access_enter.png");
                    $(".evaluate_img p img").eq(i+1).attr("src","{{env('IMAGE_DOMAIN')}}images/access_half.png");
                };
            }
        }
        change()
        $(function(){
            var evaluate_outer_h=$(window).height();
            $(".evaluate_outer").css({"min-height":evaluate_outer_h});
        })
        $("#submit").click(function() {
            var ordernumber = $("input[name='ordernumber']").val();
            var score = '6'; //TODO 先设置默认值
            var picture = '';
            var content = $("textarea").val();
            if(score == '' ) {
                alert('请选择评分');
            }
            if(content == '') {
                alert('内容不能为空');
            }
            $.ajax({
                url :"/mobile/wallet/comment/add",
                type:'POST',
                data : {
                    'ordernumber':ordernumber,
                    'score': score,
                    'content':content,
                    'picture':picture
                    },
                dataType:'json',
                async:false,
                success:function(data){
                    if (data.status == "success") {
                         window.location.href = '/mobile/wallet/index';
                    } else {
                        alert(data.message);
                    }
                }
            });
        });
    </script>
@endsection